Spring 2018
Who am I?
Who are you?
What brought you here?
Internet Mapping Clients: Basic HTML, Javascript, CSS; Google Maps API; OpenLayers javascript library
Geospatial Services Oriented Architectures (SOA)
Open Standards: Open Geospatial Consortium (OGC - WMS, WFS, WCS, KML); Extensible Markup Language (XML)
Desktop client use of Open Standards
Data sharing/publication using Open Standards
What is Internet Mapping?
Definitions
Tools
Use of open standards based remote data and map services in desktop applications
Establishing open standards based services to share geospatial data and mapping capabilities over the Internet
The delivery of mapping and geospatial data tools through web browsers, again based upon open standards
The global computer network of computers that typically connect with each other over TCP/IP
The subset of applications that are run over the Internet, typically using the HTTP protocol in combination with data (HTML, XML, XHTML), presentation (CSS), and behavior (JavaScript) components
The generation of cartographic products that include map images (pictures of geospatial data) and other elements (e.g. legends, tools, scale information, north-arrow)
The development of models (statistical and otherwise) that enable the exploration of geospatial data and testing of hypotheses using those data
While the definition varies from one organization to the next, Open Standards are often characterized by the following:
Ability of systems to share data and information with each other
Commercial Off-the-Shelf Software. Applications that are “purchased” from vendors, often with license terms that restrict the use the software to the specific platform for which it is licensed. Often comes with implicit or explicit technical support
Software licensed under terms that are consistent with the Open Source definition, which includes access to source code, and freedom to modify and redistribute
Actual values associated with geographic locations. For example - numeric elevation values associated with locations within a Digital Elevation Model.
Data about a particular data product or service. Metadata provide critical documentation that supports the discovery and use of data products and data and mapping services
<html>
<!-- The HTML block is the container for all of your page content -->
<head>
<!-- The head is where you include pointers to external resources
(i.e. style sheets and javascript files), blocks of Javascript code
, styles, etc. -->
<title>The page title also goes in here</title>
</head>
<body>
<!-- The body is where you put all of the content for the page
(i.e. the material that will be displayed in the web browser) -->
<h1>Headers</h1>
<div>Generic blocks of content</div>
<p>Paragraphs</p>
<table>Tables</table>
<img ...>Images</img>
<form ...>Forms</form>
<ul>Unordered Lists</ul>
<ol>Ordered Lists</ol>
<li>List Items</li>
<!-- Javascript can go here as well -->
</body>
</html>Content is defined in terms of the structural elements available in HTML/XHTML
<p>...</p> tags<h1>...</h1>, <h2>...</h2>, <h3>...</h3>, etc.<table>...</table> tags<ol>...</ol> or <ul>...</ul> tags, depending upon whether the list is ordered (numbered) or unordered (e.g. bulleted)<form>...</form> tags<div>...</div> tagsModifications to default rendering of HTML/XHTML elements are made through styles defined in CSS
<head> block (the preferred method when doing “real” web development)<head> block of a web pageh1 {color:red; font-size:18px;}Selectors may be based on several criteria
h1, p, table, ul, etc.
<h1>A top level heading</h1>h1 {color:red; font-size:18px}<p id=”para01”>Some text goes here</p>#para01 {color:blue; font-size:12px}<p class=”instructions”>Here are some instructions</p><p class=”instructions”>Here are some more instructions</p>.instructions {color:red; font-size:12px; text-decoration:blink}The most interoperable language for adding dynamic behavior to web sites is Javascript - supported by most browsers on most operating systems
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>This is a simple web page</title>
</head>
<body>
<h1>They don't get any simpler than this!</h1>
<p>OK, not much simpler than this.</p>
<p>Hello World?</p>
</body>
</html><html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>This is a simple web page - with styling</title>
<style type="text/css">
h1 {color:blue; font-size:large}
p.para {color:#777777; font-size:small}
#annoying {color:red; text-decoration:line-through}
</style>
</head>
<body>
<h1>They don't get any simpler than this!</h1>
<p class="para">OK, not much simpler than this.</p>
<p id="annoying" class="para">Hello World?</p>
</body>
</html><html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>This is a simple web page with Javascript</title>
<script type="text/javascript">
function genericAlert() {
alert("You just did something ...")
document.getElementById("clickMe").style.color = "red"
}
</script>
</head>
<body>
<h1>They don't get any simpler than this!</h1>
<p>OK, not much simpler than this.</p>
<p>Hello World?</p>
<p id="clickMe" onclick="genericAlert();">What happens when you click me?</p>
</body>
</html>What is an API
An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. – From Wikipedia: http://en.wikipedia.org/wiki/Api
Overlay Types documentation
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_01.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>/* You must set the height of either the 'html' or 'body' elements for some
browsers to properly render the map with a hight taller than 0px */
html {
height: 100% }
body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: black;
color: #CCCCCC;
text-align: center}
#map_canvas {
width:90%;
height:80%;
margin-left:auto;
margin-right: auto }
.infoBox {
color:black }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_02.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_03.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_04.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_05.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_06.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoomControl: true,
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
streetViewControl: false
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_07.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_08.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html> var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
var officeVisitCoordinates = [
office,
new google.maps.LatLng(35.084445,-106.624327),
new google.maps.LatLng(35.084309,-106.624308),
classroom
];
var officePath = new google.maps.Polyline({
path: officeVisitCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
officePath.setMap(map)
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_09.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
var buildingCoordinates = [
new google.maps.LatLng(35.084498,-106.624921),
new google.maps.LatLng(35.084558,-106.624911),
new google.maps.LatLng(35.084566,-106.624970),
new google.maps.LatLng(35.084609,-106.624966),
new google.maps.LatLng(35.084544,-106.624383),
new google.maps.LatLng(35.084438,-106.624317),
new google.maps.LatLng(35.084384,-106.623922),
new google.maps.LatLng(35.084164,-106.623970),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084391,-106.624284)
];
var bldgPoly = new google.maps.Polygon({
paths: buildingCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bldgPoly.setMap(map)
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_10.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
var buildingCoordinates = [
new google.maps.LatLng(35.084498,-106.624921),
new google.maps.LatLng(35.084558,-106.624911),
new google.maps.LatLng(35.084566,-106.624970),
new google.maps.LatLng(35.084609,-106.624966),
new google.maps.LatLng(35.084544,-106.624383),
new google.maps.LatLng(35.084438,-106.624317),
new google.maps.LatLng(35.084384,-106.623922),
new google.maps.LatLng(35.084164,-106.623970),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084391,-106.624284)
];
var bldgPoly = new google.maps.Polygon({
paths: buildingCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bldgPoly.setMap(map);
var classInfoContent = '<div class="infoBox">' +
'<p>This is the location for the Geography 485L/585L class</p>' +
'</div>'
var classInfoWindow = new google.maps.InfoWindow({
content: classInfoContent
});
google.maps.event.addListener(classroomMarker, 'click', function() {
classInfoWindow.open(map,classroomMarker);
});
var bldgInfoContent = '<div class="infoBox">' +
'<p>This is the location of Bandelier East and West on the UNM Campus</p>' +
'<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1486322485343!6m8!1m7!1sneDc4DwioOJ-TytixzvJEg!2m2!1d35.08459518161192!2d-106.6243050674837!3f207.5327084691508!4f-4.850942482843806!5f0.7820865974627469" width="300" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>' +
'</div>'
var bldgInfoWindow = new google.maps.InfoWindow({
content: bldgInfoContent
});
google.maps.event.addListener(bldgPoly, 'click', function() {
var position = new google.maps.LatLng(35.084438,-106.624317)
bldgInfoWindow.setPosition(position)
bldgInfoWindow.open(map);
});
}
Styled Maps Documentation | Create Map Style wizard
gmap_styled.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map - Styled (POIs Highlighted)</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_styled.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<YourKey>">
</script>
</body>
</html>mapPage_styled.js
function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
zoom: 8,
center: classroom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ hue: "#0008ff" }
]
},{
featureType: "road.highway",
stylers: [
{ hue: "#ff1a00" }
]
},{
featureType: "road.arterial",
stylers: [
{ hue: "#ffa200" },
{ visibility: "simplified" }
]
},{
featureType: "road.local",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative",
stylers: [
{ visibility: "simplified" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "on" },
{ hue: "#00ffff" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "on" }
]
}
]
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}Sample Fusion Table from the previous NAWRS Mapper example: https://www.google.com/fusiontables/DataSource?docid=1v2IlIFJqat2tTSBA8e4guqlzMGRe8iW4yXP25Kg
NAWRS Mapper Javascript File: https://github.com/nawrs/nawrs-google/blob/master/core.js
gmaps_events.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/event_mapPage.css">
<title>Karl's Event Diary</title>
</head>
<body>
<h1>My diary of endurance events that I've participated in since joining
Team in Training
</h1>
<p>In 2008 Cynthia and I joined the Leukemia and Lymphoma Society's
(<a href="http://www.lls.org/">LLS</a>) Team in Training
(<a href="http://www.teamintraining.org/">TNT</a>,
<a href="http://youtu.be/GMSKG8L6K78">info video</a>) program as
participants to train for the Animas Valley/Steamworks Half Marathon and
raise money for blood cancer research and patient services. In spite of
our not having any direct connection to blood cancer (at that time),
we found the goals of LLS admirable, the combined training and
fund-raising program of TNT a great idea, and made many new friends
over the many seasons that we have been involved with TNT.</p>
<p>From 2008 through early 2015 we continued to volunteer with TNT, as
participants, mentors, and since 2010 I was a coach (check out my
<a href="http://youtu.be/GMSKG8L6K78">half-second</a> of fame in the
info video at 2:13) for TNT with an emphasis on training walkers for
full- or half-marathons. This page provides a summary of the events that
I've participated in in some capacity since 2008. </p>
<!-- based on the example provided by Google -
https://developers.google.com/maps/documentation/javascript/examples/
style-selector -->
<div id="style-selector-control" class="map-control">
<select id="style-selector" class="selector-control">
<option value="default">Default</option>
<option value="silver">Silver</option>
<option value="night">Night mode</option>
<option value="retro" selected="selected">Retro</option>
<option value="hiding">Hide features</option>
</select>
</div>
<div id="event-map" name="event-map"></div>
<table>
<thead>
<th>Date</th>
<th>Event Name</th>
<th>Event Time</th>
<th>Location on Map</th>
</thead>
<tbody>
<tr>
<td>1/8/2017</td>
<td>Disney World Marathon</td>
<td>7:14</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>10/16/2016</td>
<td>Duke City Half Marathon </td>
<td>~2:55</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
11)">map</a></td>
</tr>
<tr>
<td>11/13/2015</td>
<td>Avengers Half Marathon </td>
<td>3:17:55</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
12)">approx. map</a></td>
</tr>
<tr>
<td>1/11/2015</td>
<td>Disney World Marathon (Goofy - Day 2)</td>
<td>6:21:01</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>1/10/2015</td>
<td>Disney World Half Marathon (Goofy - Day 1)</td>
<td>2:45:55</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>10/19/2014</td>
<td>Duke City Half Marathon</td>
<td>2:45:17</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
11)">map</a></td>
</tr>
<tr>
<td>2/23/2014</td>
<td>Princess Half Marathon</td>
<td>3:07:11</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>2/22/2014</td>
<td>Princess Enchanted 10k</td>
<td>1:42:43</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>9/1/2013</td>
<td>Disneyland Half Marathon</td>
<td>2:56:57</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
12)">approx. map</a></td>
</tr>
<tr>
<td>1/13/2013</td>
<td>Disney World Marathon (Goofy - Day 2)</td>
<td>6:46:57</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>1/12/2013</td>
<td>Disney World Half Marathon (Goofy - Day 1)</td>
<td>3:22:48</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>9/29/2012</td>
<td>Hot Chocolate 15k </td>
<td>1:56:46</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[6].point,
10)">map</a></td>
</tr>
<tr>
<td>6/9/2012</td>
<td>Animas Valley/Steamworks Half Marathon</td>
<td>no time: coached</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
10)">map</a></td>
</tr>
<tr>
<td>1/9/2012</td>
<td>Disney World Marathon (Goofy - Day 2)</td>
<td>6:56:28</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">map</a></td>
</tr>
<tr>
<td>1/8/2011</td>
<td>Disney World Half Marathon (Goofy - Day 1)</td>
<td>3:29:00</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">map</a></td>
</tr>
<tr>
<td>6/19/2010</td>
<td>Animas Valley/Steamworks Half Marathon</td>
<td>no time: coached</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
10)">map</a></td>
</tr>
<tr>
<td>6/6/2010</td>
<td>San Diego Rock 'n' Roll Marathon</td>
<td>no time: coached</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[2].point,
11)">map</a></td>
</tr>
<tr>
<td>10/18/09</td>
<td>Nike Women's Marathon</td>
<td>7:13:05</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[3].point,
12)">map</a></td>
</tr>
<tr>
<td>9/6/2009</td>
<td>Disneyland Half Marathon</td>
<td>3:43:05</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
12)">map</a></td>
</tr>
<tr>
<td>1/11/2009</td>
<td>Disney World Marathon</td>
<td>6:57:42</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">map</a></td>
</tr>
<tr>
<td>10/19/2008</td>
<td>Duke City Half Marathon</td>
<td>3:09:42</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
11)">map</a></td>
</tr>
<tr>
<td>6/21/2008</td>
<td>Animas Valley/Steamworks Half Marathon</td>
<td>3:14:52</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
10)">map</a></td>
</tr>
</tbody>
</table>
</body>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_events.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&
key=<YourKey>">
</script>
</body>
</html>gmaps_events.js
var map;
var eventPlaces;
function initialize() {
// Define a set of global coordinates for use throughout the web site
// Place coordinates derived from GNIS database: http://geonames.usgs.gov/
// pls/gnispublic
// from https://tools.wmflabs.org/geohack/geohack.php?
// pagename=Geographic_center_of_the_contiguous_United_States&
// params=39.828175_N_98.579500_W_region:US_type:landmark
geoCenter = new google.maps.LatLng(39.828175,-98.5795)
eventPlaces = [
{
name: "Albuquerque",
point: new google.maps.LatLng(35.0889356,-106.5747462),
label: "Albuquerque: Duke City Half Marathon"
},
{
name: "Durango",
point: new google.maps.LatLng(37.2752800,-107.8800667),
label: "Durango: Animas Valley/Steamworks Half Marathon"
},
{
name: "San Diego",
point: new google.maps.LatLng(32.7153292,-117.1572551),
label: "San Diego: San Diego Rock 'n' Roll Marathon"
},
{
name: "San Francisco",
point: new google.maps.LatLng(37.7749295,-122.4194155),
label: "San Francisco: Nike Women's Marathon"
},
{
name: "Orlando",
point: new google.maps.LatLng(28.5383355,-81.3792365),
label: "Orlando: Walt Disney World half- and full-marathon"
},
{
name: "Anaheim",
point: new google.maps.LatLng(33.8352932,-117.9145036),
label: "Anaheim: Disneyland Half Marathon"
},
{
name: "Albuquerque",
point: new google.maps.LatLng(35.0889356,-106.5747462),
label: "Hot Chocolate 15k"
}
];
var myOptions = {
zoom: 4,
center: geoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false};
map = new google.maps.Map(
document.getElementById("event-map"),
myOptions);
addMarkers(map,eventPlaces)
// Add a style-selector control to the map.
var styleControl = document.getElementById('style-selector-control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
// Set the map's style to the initial value of the selector.
var styleSelector = document.getElementById('style-selector');
map.setOptions({styles: styles[styleSelector.value]});
// Apply new JSON when the user selects a different style.
styleSelector.addEventListener('change', function() {
map.setOptions({styles: styles[styleSelector.value]});
});
}
function recenter(mapName, latlon, zoomLevel) {
mapName.setCenter(latlon);
mapName.setZoom(zoomLevel)
}
function addMarkers(mapName, markerArray) {
for (index = 0; index < markerArray.length; index++) {
myMarker = new google.maps.Marker({
position: markerArray[index].point,
title: markerArray[index].label
});
myMarker.setMap(mapName)
}
}
// styles generated by https://mapstyle.withgoogle.com
var styles = {
default: null,
silver: [
{
elementType: 'geometry',
stylers: [{color: '#f5f5f5'}]
},
{
elementType: 'labels.icon',
stylers: [{visibility: 'off'}]
},
{
elementType: 'labels.text.fill',
stylers: [{color: '#616161'}]
},
{
elementType: 'labels.text.stroke',
stylers: [{color: '#f5f5f5'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#bdbdbd'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#eeeeee'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#757575'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#e5e5e5'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#9e9e9e'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#ffffff'}]
},
{
featureType: 'road.arterial',
elementType: 'labels.text.fill',
stylers: [{color: '#757575'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#dadada'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#616161'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#9e9e9e'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#e5e5e5'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#eeeeee'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#c9c9c9'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#9e9e9e'}]
}
],
night: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
],
retro: [
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
hiding: [
{
featureType: 'poi.business',
stylers: [{visibility: 'off'}]
},
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{visibility: 'off'}]
}
]
};For example, a census vector data product might include the geometries that define census tracts and attributes associated with each geometry: population, income, etc.
Raster data are frequently used to represent values for phenomena that vary continuously across space (e.g. elevation, concentration of air pollutants, depth to ground water, etc. )
These values are encoded over a regular grid of observation locations with a specified grid spacing - often referred to as the spatial resolution of the dataset (i.e. 10m resolution for a standard USGS Digital Elevation Model product)
Often parts of data collections that are repeated (i.e. remote sensing data products)
These libraries are the data access and processing foundation for a growing number of open source and commercial mapping systems
Information and documentation: GDAL Home Page | OGR Home Page
A catalog of numeric codes and associated coordinate transformation parameters is maintained by the International Association of Oil & Gas Producers (OGP) - the successor scientific organization to the European Petroleum Survey Group (EPSG)
These numeric codes are used by many desktop and online mapping systems to document and represent the coordinate systems of available data and services
Links to an online version of the registry and downloadable databases of the registry are available from: http://www.epsg.org/Geodetic.html.
The parameters that define a map projection may be looked up in a number of online locations:
The current networking computing model consists of Components Interacting with Each Other
What are components?
What does it mean to interact?
Database systems
File-based data
May be “chained” together to create a processing “workflow”. Output from one processing service may be used as the input to another
http://gstore.unm.edu/apps/rgis/datasets/
b030ab7b-86e3-4c30-91c0-f427303d5c77/
services/ogc/wms?
VERSION=1.1.1&&
SERVICE=WMS&
REQUEST=GetMap&
SRS=EPSG:4326&
FORMAT=image/jpeg&
STYLES=&
LAYERS=bernalillo_tm2011&
TRANSPARENT=TRUE&
WIDTH=521&
HEIGHT=200&
bbox=-107.207,34.8404,-106.143,35.2487
GetCapabilitiesGetMapGetFeatureInfoGetCapabilitiesDescribeFeatureTypeGetFeature/GetFeatureWithLockGetGmlObjectLockFeatureTransactionGetCapabilitiesDescribeCoverageGetCoverageImplementation information based upon OGC Implementation Statistics - Accessed 2/2017
The OGC web service specifications support key geospatial data access requirements
The OGC data and representation standards support data exchange and higher level representation
From XML 1.0 (5th ed.) Recommendation
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Some comment would go here to describe this document ... -->
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body type="instruction" >Don't forget me this weekend!</body>
</note>XML Source (modified from original): w3schools
Includes XML Declaration and Comment
Define blocks of content
<br />Define additional information about elements as name=value pairs.
The material contained between the opening and closing tags of an Element.
Why is this XML well-formed but not valid?
There is no DTD or Schema defined for the document against which it can be validated
<!DOCTYPE greeting SYSTEM "hello.dtd">
<![CDATA[<greeting>Hello, world!</greeting>]]>
<root
xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="http://www.w3schools.com/furniture">
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:legs>4</f:legs>
<f:cost>300</f:cost>
<f:width>3</f:width>
<f:length>5</f:length>
<f:height>4</f:height>
</f:table>
</root>folder elements<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<Polygon>
<altitudeMode>
clampToGround
</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-135,78.5,300000
-135,12.5,300000
-45,12.5,300000
-45,78.5,300000
-135,78.5,300000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>Example from: KML 2.2 Specification (fig. 6, pg. 21)
New Mexico State Boundary KML File | KMZ File (from NM RGIS)
OGC KML Implementation specification
GetCapabilities) - an XML file representing information about a specific WMS service and its component layersGetMap) - graphic files representing one or more layers from a single WMS service for a specified area of interest, and, optionally, for a specified point in timeGetFeatureInfo) - a basic representation (in a variety of formats) of the attributes associated with a specific pixel location in a map image| Request Parameter | 1.0 | 1.1 | 1.1.1 | 1.3.0 | Description |
|---|---|---|---|---|---|
| WMTVER = 1.0.0 | R | Request version | |||
| VERSION = version | O | O | O | Request version | |
| SERVICE = WMS | R | R | R | R | Service type |
| REQUEST = capabilities | R | Request name | |||
| REQUEST = GetCapabilities | R | R | R | Request name | |
| UPDATESEQUENCE = string | O | O | O | Sequence number or string for cache control | |
| Vendor-specific parameters | O | Vendor-specific parameters |
R=Required / O=Optional
| Request Parameter | 1.0 | 1.1 | 1.1.1 | 1.3.0 | Description |
|---|---|---|---|---|---|
| WMTVER = 1.0.0 | R | Request version | |||
| VERSION = version | R | R | R | Request version. | |
| REQUEST = map | R | Request name. | |||
| REQUEST = GetMap | R | R | R | Request name. | |
| LAYERS = layer_list | R | R | R | R | Comma-separated list of one or more map layers. Optional (ver. 1.1, 1.1.1) if SLD parameter is present. |
| STYLES = style_list | R | R | R | R | Comma-separated list of one rendering style per requested layer. Optional if SLD parameter is present. |
| SRS = namespace:identifier | R | R | R | Spatial Reference System. | |
| CRS = namespace:identifier | R | Spatial Reference System. | |||
| BBOX = minx,miny,maxx,maxy | R | R | R | R | Bounding box corners (lower left, upper right) in SRS units. |
| WIDTH = output_width | R | R | R | R | Width in pixels of map picture. |
| HEIGHT = output_height | R | R | R | R | Height in pixels of map picture. |
| FORMAT = output_format | R | R | R | R | Output format of map. |
| TRANSPARENT = TRUE or FALSE | O | O | O | O | Background transparency of map (default = FALSE). |
| BGCOLOR = color_value | O | O | O | O | Hexadecimal red-green-blue color value for the background color (default = 0xFFFFFF). |
| EXCEPTIONS = exception_format | O | O | O | O | The format in which exceptions are to be reported by the WMS (default = XML). |
| TIME = time | O | O | O | Time value of layer desired. | |
| ELEVATION = elevation | O | O | O | Elevation of layer desired. | |
| Other sample dimensions | O | O | O | Values of other dimensions as appropriate. | |
| Vendor specific parameters | O | O | O | O | Vendor specific parameters |
| Request Parameter | 1.0 | 1.1 | 1.1.1 | 1.3.0 | Description |
|---|---|---|---|---|---|
| WMTVER = 1.0.0 | R | Request version. | |||
| VERSION = version | R | R | R | Request version. | |
| REQUEST = feature_info | R | Request name. | |||
| REQUEST = GetFeatureInfo | R | R | R | Request name. | |
<map_request_copy> |
R | R | R | R | Partial copy of the Map request parameters that generated the map for which information is desired |
| QUERY_LAYERS = layer_list | R | R | R | R | Comma-separated list of one or more layers to be queried. |
| INFO_FORMAT = output_format | O | O | O | R | Return format of feature information (MIME type). |
| FEATURE_COUNT = number | O | O | O | O | Number of features about which to return information (default = 1). |
| X = pixel_column | R | R | R | X coordinate in pixels of feature (measured from upper left corner = 0) | |
| I = pixel_column | R | i coordinate in pixels of feature in Map CS | |||
| Y = pixel_row | R | R | R | Y coordinate in pixels of feature (measured from upper left corner = 0) | |
| J = pixel_row | R | j coordinate in pixels of feature in Map CS | |||
| EXCEPTIONS = exception_format | O | O | O | The format in which exceptions are to be reported by the WMS (default = XML). | |
| Vendor-specific parameters | O | O | O | Optional experimental parameters. |
http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?
SERVICE=wms&
REQUEST=GetCapabilities&
VERSION=1.1.1<?xml version='1.0' encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE WMT_MS_Capabilities SYSTEM "http://schemas.opengis.net/wms/1.1.1/
WMS_MS_Capabilities.dtd"
[
<!ELEMENT VendorSpecificCapabilities EMPTY>
]> <!-- end of DOCTYPE declaration -->
<WMT_MS_Capabilities version="1.1.1">
<!-- MapServer version 6.0.3 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG OUTPUT=KML SUPPORTS=PROJ
SUPPORTS=AGG SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT
SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER
INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE -->
<Service>
<Name>OGC:WMS</Name>
<Title>tl_2010_35_state10</Title>
<Abstract>WMS Service for RGIS dataset State Boundary - 2010
(6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Abstract>
<KeywordList>
<Keyword>RGIS</Keyword>
<Keyword> New Mexico</Keyword>
</KeywordList>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms"/>
<ContactInformation>
<ContactPersonPrimary>
<ContactPerson>GStore Support</ContactPerson>
<ContactOrganization>Earth Data Analysis Center</ContactOrganization>
</ContactPersonPrimary>
<ContactPosition>technical support</ContactPosition>
<ContactAddress>
<AddressType>Mailing address</AddressType>
<Address>Earth Data Analysis Center, MSC01 1110,
1 University of New Mexico</Address>
<City>Albuquerque</City>
<StateOrProvince>NM</StateOrProvince>
<PostCode>87131</PostCode>
<Country>US</Country>
</ContactAddress>
<ContactVoiceTelephone>(505) 277-3622</ContactVoiceTelephone>
<ContactFacsimileTelephone>(505) 277-3614</ContactFacsimileTelephone>
<ContactElectronicMailAddress>gstore@edac.unm.edu</ContactElectronicMailAddress>
</ContactInformation>
<Fees>None</Fees>
<AccessConstraints>none</AccessConstraints>
</Service>
<Capability>
<Request>
<GetCapabilities>
<Format>application/vnd.ogc.wms_xml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetCapabilities>
<GetMap>
<Format>image/png</Format>
<Format>image/gif</Format>
<Format>image/jpeg</Format>
<Format>image/png; mode=8bit</Format>
<Format>image/tiff</Format>
<Format>application/vnd.google-earth.kml+xml</Format>
<Format>application/vnd.google-earth.kmz</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetMap>
<GetFeatureInfo>
<Format>text/plain</Format>
<Format>application/vnd.ogc.gml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetFeatureInfo>
<DescribeLayer>
<Format>text/xml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</DescribeLayer>
<GetLegendGraphic>
<Format>image/png</Format>
<Format>image/gif</Format>
<Format>image/jpeg</Format>
<Format>image/png; mode=8bit</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetLegendGraphic>
<GetStyles>
<Format>text/xml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetStyles>
</Request>
<Exception>
<Format>application/vnd.ogc.se_xml</Format>
<Format>application/vnd.ogc.se_inimage</Format>
<Format>application/vnd.ogc.se_blank</Format>
</Exception>
<VendorSpecificCapabilities />
<UserDefinedSymbolization SupportSLD="1" UserLayer="0" UserStyle="1" RemoteWFS="0"/>
<Layer>
<Name>tl_2010_35_state10</Name>
<Title>tl_2010_35_state10</Title>
<Abstract>WMS Service for RGIS dataset State Boundary - 2010
(6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Abstract>
<KeywordList>
<Keyword>RGIS</Keyword>
<Keyword> New Mexico</Keyword>
</KeywordList>
<SRS>EPSG:4269</SRS>
<SRS>EPSG:4326</SRS>
<SRS>EPSG:4267</SRS>
<SRS>EPSG:26913</SRS>
<SRS>EPSG:26912</SRS>
<SRS>EPSG:26914</SRS>
<SRS>EPSG:26713</SRS>
<SRS>EPSG:26712</SRS>
<SRS>EPSG:26714</SRS>
<SRS>EPSG:3857</SRS>
<LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<BoundingBox SRS="EPSG:4326"
minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<Layer queryable="1" opaque="0" cascaded="0">
<Name>tl_2010_35_state10</Name>
<Title>tl_2010_35_state10</Title>
<Abstract>State Boundary - 2010</Abstract>
<KeywordList>
<Keyword></Keyword>
</KeywordList>
<SRS>epsg:4326</SRS>
<LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<BoundingBox SRS="epsg:4326"
minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<MetadataURL type="FGDC-STD-001-1998">
<Format>text/xml</Format>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/metadata/FGDC-STD-001-1998.xml"/>
</MetadataURL>
<Style>
<Name>default</Name>
<Title>default</Title>
<LegendURL width="72" height="22">
<Format>image/png</Format>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/services/ogc/wms?version=1.1.1&service=WMS&request=GetLegendGraphic&layer=tl_2010_35_state10&format=image/png&STYLE=default"/>
</LegendURL>
</Style>
</Layer>
</Layer>
</Capability>
</WMT_MS_Capabilities>http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
VERSION=1.1.1&
SERVICE=WMS&
REQUEST=GetMap&
BBOX=-109,31,-102.9,37.1&
LAYERS=tl_2010_35_state10&
WIDTH=200&
HEIGHT=200&
SRS=EPSG:4326&
FORMAT=image/jpeg&
STYLES=The documents related to the OGC WFS standard are available from: http://www.opengeospatial.org/standards/wfs and all operation parameter tables presented here are based upon the OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02
From the Version 2.0.0 WFS Scope Section:
This International Standard specifies the behaviour of a service that provides transactions on and access to geographic features in a manner independent of the underlying data store. It specifies discovery operations, query operations, locking operations, transaction operations and operations to manage stored parameterized query expressions.
Discovery operations allow the service to be interrogated to determine its capabilities and to retrieve the application schema that defines the feature types that the service offers.
Query operations allow features or values of feature properties to be retrieved from the underlying data store based upon constraints, defined by the client, on feature properties.
Locking operations allow exclusive access to features for the purpose of modifying or deleting features.
Transaction operations allow features to be created, changed, replaced and deleted from the underlying data store.
Stored query operations allow clients to create, drop, list and described parameterized query expressions that are stored by the server and can be repeatedly invoked using different parameter values.
These request types are submitted as part of the required REQUEST key in a KVP HTTP GET request.
GetCapabilitiesDescribeFeatureTypeGetPropertyValueGetFeature (GetFeatureWithLock)LockFeatureTransactionCreateStoredQueryDropStoredQueryListStoredQueriesDescribeStoredQueriesWFS 2.0.0 Requests and their corresponding WFS Compliance Levels
Operation (REQUEST=) |
V 1.1.0 | V 2.0.0 | Simple | Basic | Transactional | Locking |
|---|---|---|---|---|---|---|
GetCapabilities |
||||||
DescribeFeatureType |
||||||
ListStoredQueries |
||||||
DescribeStoredQueries |
||||||
GetFeature |
||||||
StoredQuery |
||||||
GetPropertyValue |
||||||
Transaction |
||||||
GetFeatureWithLock |
||||||
LockFeature |
||||||
GetGMLObject |
Requests submitted to a WFS may be submitted either via
Servers implementing WFS may support either the HTTP GET, POST, or SOAP request model
Conceptually FeatureType = Layer
Base request parameters for all HTTP GET KVP requests
VERSION is required for all operations except the GetCapabilities request
Sample request to USGS Framework Layer (Governmental Units) WFS Service advertised by the USGS TNM Access API page service list - Live Link
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
request=GetCapabilities&
service=WFS
Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link
http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
SERVICE=wfs&
REQUEST=GetCapabilities&
VERSION=1.0.0
DescribeFeatureType HTTP GET KVP request
USGS Framework Layer (Governmental Units) WFS Service linked from the USGS TNM Access API page service list - Live Link
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
version=1.1.0&
request=DescribeFeatureType&
service=WFS&
typeName=WFS_govunits:State_or_Territory_High-res
Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link
http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
VERSION=1.0.0&
SERVICE=wfs&
REQUEST=DescribeFeatureType&
TYPENAME=tl_2010_35_bg10
GetFeature HTTP GET KVP request
USGS Framework Layer (Governmental Units) WFS Service linked from the USGS TNM Access API page service list - Live Link
Note: TYPENAME for VERSION=1.1.0 instead of TYPENAMES for VERSION=2.0.0
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
VERSION=1.1.0&
REQUEST=GetFeature&
SERVICE=WFS&
TYPENAME=WFS_govunits:State_or_Territory_High-res
Alternative request (Live Link) that includes an OUTPUTFORMAT parameter
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
VERSION=1.1.0&
REQUEST=GetFeature&
SERVICE=WFS&
TYPENAME=WFS_govunits:State_or_Territory_High-res&
OUTPUTFORMAT=text/xml;%20subType=gml/3.1.1/profiles/gmlsf/1.0.0/0
The documents related to the OGC WCS standard are available from: [http://www.opengeospatial.org/standards/wcs][wcs] with the sample parameters in the following slides based upon the OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27
From the OGC WCS 2.0 Introduction
The OGC Web Coverage Service (WCS) supports electronic retrieval of geospatial data as “coverages” – that is, digital geospatial information representing space/time-varying phenomena.
This document specifies the WCS core; every implementation of a WCS shall adhere to this standard. This standard thus defines only basic requirements. Extensions to the core will define extensions to meet additional requirements, such as the response encoding. Indeed, additional extensions are required in order to completely specify a WCS for implementation.
A WCS provides access to coverage data in forms that are useful for client-side rendering, as input into scientific models, and for other clients. The WCS may be compared to the OGC Web Feature Service (WFS) and the Web Map Service (WMS). As WMS and WFS service instances, a WCS allows clients to choose portions of a server’s information holdings based on spatial constraints and other query criteria.
GetCapabilitiesDescribeCoverageGetCoverageRequests submitted to a WCS may be submitted either via the following protocols, as defined in the three extensions developed thus far for the core WCS standard.
| Name | Mandatory/Optional | Definition | Data Type |
|---|---|---|---|
| service | M | Identifier of the OGC service | String, fixed to “WCS” |
| request | M | Request type name | String, set to operation name |
| version | M (except for GetCapabilities) | Request protocol version | String |
GetCapabilities requestsNOAA Global Forecast System THREDDS catalog. Live Link
http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201602/20160228/
gfs_4_20160228_0000_384.grb2?
service=WCS&
version=1.0.0&
request=GetCapabilities
New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link
http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
SERVICE=wcs&
REQUEST=GetCapabilities&
VERSION=1.1.2
DescribeCoverage HTTP GET KVP request (Figure 1)
NOAA Global Forecast System THREDDS catalog. Live Link
http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201602/20160228/
gfs_4_20160228_0000_384.grb2?
service=WCS&
version=1.0.0&
request=DescribeCoverage&
COVERAGE=Categorical_Rain
New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link
http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
SERVICE=wcs&
REQUEST=DescribeCoverage&
VERSION=1.1.2&
COVERAGE=us_ppt_1971_2000_11
GetCoverage HTTP GET KVP request (Figure 1)
Subset definition for the GetCoverage HTTP GET KVP request
Example from the 2.0 specification:
http://www.myserver.org:port/path?
service=WCS
&version=2.0
&request=GetCoverage
&coverageId=C0002
&subset=lon,http://www.opengis.net/def/crs/EPSG/0/4326(-71,47)
&subset=lat,http://www.opengis.net/def/crs/EPSG/0/4326(-66,51)
&subset=t,http://www.opengis.net/def/trs/ISO- 8601/0/Gregorian+UTC("2009-11-06T23:20:52Z")
New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link
http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
SERVICE=wcs&
REQUEST=GetCoverage&
VERSION=1.1.2&
COVERAGE=us_ppt_1971_2000_11&
CRS=urn:ogc:def:crs:EPSG::4326&
BBOX=24.0625,-125.02083333333,49.93749998965,-66.47916669008&
FORMAT=image/tiff&
WIDTH=2048&
HEIGHT=905
Capabilities
OpenLayers = Javascript (by example)
Application Programming Interface (API) Reference
OpenLayers_01.html
<html>
<head>
<link rel="stylesheet" href="css/OpenLayers_01.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
openlayers/4.0.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.js"
type="text/javascript"></script>
</head>
<body>
<h1>This is a very simple OpenLayers 4 sample map page</h1>
<div id='map'><!-- This is where the map will be displayed --></div>
<!-- import the external Javascript file with the map configuration code -->
<script src="js/OpenLayers_01.js" type="text/javascript"></script>
</body>
</html>OpenLayers_01.js
// OpenLayers_01.js
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-106.624083,35.08427]),
zoom: 18
})
});OpenLayers_01.css
/* OpenLayers_01.css */
body {
width:100%;
height:100%
}
#map,.map {
width:600px;
height:400px;
}
#map_selector li {
cursor:pointer;
width:350px;
}
#map_selector li:hover {
background-color: yellow;
}
#map div.ol-viewport
div.ol-overlaycontainer-stopevent
div.ol-overviewmap.ol-unselectable.ol-control.ol-uncollapsible {
top: 200px;
bottom: 300px;
}More detailed Map Object Options
More detailed Layer Object Options
Additional Map Layer Types - With Examples
ol.layer.Tile API Referenceol.layer.Image API Referenceol.layer.Vector API Referenceol.layer.VectorTile API Referenceol.layer.Heatmap API ReferenceA variety of strategies for constructing a new OpenLayers.Map object
// create a map with minimum required elements and default
// options in an element with the id "map1"
var myMap = new ol.Map({
target: 'map1',
// a map without layers can be defined and in that case a map with no layers
// will be rendered
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-106.624083,35.08427]),
zoom: 18
})
});
// create a map with options specified in a separate 'options' variable and
// included by reference in the code to create the new map object
var options = {
// required options
target:'map2',
layers: ...,
view: ...,
// optional options - only include those that you need
controls: ...,
pixelRatio: ...,
interactions: ...,
keyboardEventTarget: ...,
loadTilesWhileAnimating: ...,
loadTilesWhileInteracting: ...,
logo: ...,
overlays: ...,
renderer: ...
};
var map = new ol.Map(options);
// map with non-default options - same as above but with a single argument
var map = new ol.Map({
// required options
target:'map2',
layers: ...,
view: ...,
// optional options - only include those that you need
controls: ...,
pixelRatio: ...,
interactions: ...,
keyboardEventTarget: ...,
loadTilesWhileAnimating: ...,
loadTilesWhileInteracting: ...,
logo: ...,
overlays: ...,
renderer: ...
});
// the following commands can be executed to add, set or remove the layers in a map
// after a map object has been created
map.addLayer(layer)
map.removeLayer(layer)
map.setLayerGroup(layerGroup)
// the view of a layer can be created or modified after the map object has been
// created by using the following command
map.setView()
// the target DOM object for the map object can be set or changed using
// the following command
map.setTargetLayer Types and a subset of sources for each type
ol.layer.Image - a single map image is rendered for this layer type
ol.source.ImageMapGuide - API source is a MapGuide server hosting data of interest.ol.source.ImageStatic - API source renders a specified static image file within a specified extent within the map.ol.source.ImageWMS - API source retrieves a single map image from the specified OGC Web Map Service (WMS).ol.source.ImageArcGISRest - API source retrieves a single map image from the specified ArcGIS REST service.ol.layer.Tile - map images in a tiled grid are rendered for this layer type
ol.layer.VectorTile - map content is delivered vector data that has been divided into a tile grid and cannot be edited
ol.source.VectorTile - API source delivers vector data tiles for rendering in the clientol.layer.Vector - map content is delivered as vector data that is rendered by the client and may be edited within the client
ol.source.Vector - API the source for vector feature(s) that constitute a vector layer. The individual features are ol.Feature objects that consist of at least one geometry, or a collection of geometries and any additional attributes that are associated with each feature.Common Pattern of Layer Object Creation (varies some depending upon the specific layer type)
Both Map and Layer Objects have a number of associated functions as well
Get functions.Set functionsSome key issues to be aware of when using the two WMS supporting layers (ol.layer.Tile, and ol.layer.Image) and their associated WMS sources (ol.source.TileWMS and ol.source.ImageWMS respectively) include:
projection parameter as part of the map object’s view property a default Web Mercator (EPSG:3857) projection is used for the map. Information about how to define and set map projections in OpenLayers is found hereparams option must be provided as part of the server-related property list (the layer names may also be found in the GetCapabilities response)params option) may be provided as well to “adjust” the request automatically generated by OpenLayersol.layer.Image layer type to allow the WMS server to handle the distribution of layers across the entire map image instead of including them in each individual map image.Sample WMS Layer Object Creation
// OpenLayers_03_wms.js
///////////////////////////////////////////////////////////////////////////////
// define layer objects
var basemap_tiled = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WmsServer?',
params: {
LAYERS: 0,
FORMAT: 'image/png',
TRANSPARENT: true
},
attributions: [
new ol.Attribution({
html: 'Data provided by the <a href="http://basemap.nationalmap.gov">National Map</a>.'
})
]
})
})
var basemap_single = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WmsServer?',
params: {
LAYERS: 0,
FORMAT: 'image/png',
TRANSPARENT: true
},
attributions: [
new ol.Attribution({
html: 'Data provided by the <a href="http://basemap.nationalmap.gov">National Map</a>.'
})
]
})
})
var states_single = new ol.layer.Image({
source: new ol.source.ImageWMS({
attributions: new ol.Attribution({
html: 'State Boundary Restructured - USGS, National Atlas Release 5-14-12'
}),
params: {'LAYERS':'global:statep010'},
url: 'http://mapper.internetmapping.net:8081/geoserver/global/wms?',
serverType: 'geoserver'
})
})
var states_tiled = new ol.layer.Tile({
source: new ol.source.TileWMS({
attributions: new ol.Attribution({
html: 'State Boundary Restructured - USGS, National Atlas Release 5-14-12'
}),
params: {'LAYERS':'global:statep010'},
url: 'http://mapper.internetmapping.net:8081/geoserver/global/wms?',
serverType: 'geoserver'
})
})
///////////////////////////////////////////////////////////////////////////////
// create our base map objects
var singleMap = new ol.Map({
target: 'map_image',
layers: [basemap_single,states_single], //[basemap_single,states_single]
view: new ol.View({
// the approximate geographic center of the continental US
center: ol.proj.fromLonLat([-98.58,39.83]),
zoom: 3,
projection: 'EPSG:3857'
})
});
var tiledMap = new ol.Map({
target: 'map_tiled',
layers: [basemap_tiled,states_tiled], //[basemap_tiled,states_tiled]
view: new ol.View({
// the approximate geographic center of the continental US
center: ol.proj.fromLonLat([-98.58,39.83]),
zoom: 3,
projection: 'EPSG:3857'
})
});
var mixedMap = new ol.Map({
target: 'map_mixed',
layers: [basemap_tiled,states_single], //[basemap_tiled,states_single]
view: new ol.View({
// the approximate geographic center of the continental US
center: ol.proj.fromLonLat([-98.58,39.83]),
zoom: 3,
projection: 'EPSG:3857'
})
});
///////////////////////////////////////////////////////////////////////////////Example: HTML, Javascript
Vector layers support
Sample Point Feature Object creation
var classroomCoord = [-106.624073,35.084280]
var officeCoord = [-106.624899,35.084506]
var classroomPoint = new ol.geom.Point(ol.proj.fromLonLat(classroomCoord, projection));
var officePoint = new ol.geom.Point(ol.proj.fromLonLat(officeCoord, projection));Sample KML Layer Object creation with style
///////////////////////////////////////////////////////////////////////////////
// define some styles
var block_color = [0,255,0,.1]
var block_line_color = [0,255,0,1]
var county_color = [124,124,255,.25]
var county_line_color = [124,124,255,1]
var county_style = new ol.style.Style({
fill: new ol.style.Fill({
color: county_color
}),
stroke: new ol.style.Stroke({
color: county_line_color,
width: 2
}),
});
var block_style = new ol.style.Style({
fill: new ol.style.Fill({
color: block_color
}),
stroke: new ol.style.Stroke({
color: block_line_color,
width: 1
}),
});
///////////////////////////////////////////////////////////////////////////////
// unstyled layers
var blocks_kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/tl_2010_35001_tabblock10.kml',
projection: projection,
format: new ol.format.KML()
})
})
var counties_kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/2007fe_35_county00.kml',
projection: projection,
format: new ol.format.KML()
})
})
// styled layers
var counties_kml_styled = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/2007fe_35_county00.kml',
projection: projection,
format: new ol.format.KML({
extractStyles:false
})
}),
style: county_style
})
var blocks_kml_styled = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/tl_2010_35001_tabblock10.kml',
projection: projection,
format: new ol.format.KML({
extractStyles:false
})
}),
style: block_style
})
Example: HTML, Javascript
Quantum GIS (QGIS)
ArcGIS
Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:
NASA Earth Observations (NEO) Imagery WMS
http://neowms.sci.gsfc.nasa.gov/wms/wms?version=1.3.0&service=WMS&request=GetCapabilities
USGS Service Endpoints - http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?request=GetCapabilities&service=WMS
NASA Earth Observations (NEO) Imagery WMS
http://neowms.sci.gsfc.nasa.gov/wms/wms?
USGS Service Endpoints - http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?
QGIS uses the Base URL approach for adding WMS, WFS or WCS layers to a project.
The General Process:
You need to know the GetCapabilities request for the service you want to add, for example one of the USGS WMS services
http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?request=GetCapabilities&service=WMS
determine the base URL -
http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer
in this case
If in doubt, check the information in the metadata
Select the layer type you would like to from “Layer” menu, or click the button in the interface to add a specific layer type.
Add a service to the list of services in the menu (if necessary - QGIS retains information about previously added services) by selecting the “New” option under the service list in the “Add Layer(s) from a Server” dialog
Add the name, base URL and any additional information about the service to the connection dialog box
After adding the service, you can select it from the service list in the “Add Layer(s) from a Server” dialog box, connect to the service to retrieve the GetCapabilities response from the service, select the layers and other options advertised by the service through its response, and add them to your map.
After adding the layer, it appears as an available layer in the table of contents for your map.
WMS, WFS and WCS in QGIS
Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:
This model applies to ArcGIS just as it did for Quantum GIS - the base URL is provided to the various ArcGIS components that support the addition of OGC services to the client interface.
ArcGIS OGC Support Documentation
The addition of OGC WMS and WCS layers to ArcMap is through the same process of
###Overview ###{.module05a01a}
In the context of server platforms for online mapping with OGC services, there are several components that are of interest
Sample Commercial Off-the-Shelf (COTS)
Sample Open Source
GeoServer is an Open Source, Open Standards supporting geospatial web services platform
OS-Independent Binaries are Available for Multiple Platforms (these are just ‘run’ to start the server)
GeoServer may be integrated into existing Java web servlet applications (such as Apache Tomcat) using the available Web Archive (WAR) file.
OS-Specific Installers are also Available
[Installation Information] (http://docs.geoserver.org/stable/en/user/installation/)
admin:geoserver - this should be changed as soon as you start up a new server instance.Options Common to all WxS services
Options specific to individual services
Styles are XML documents that conform to the OGC SLD standard, and consist of four major components
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
one or more <NamedLayer> ... </NamedLayer> elements
</StyledLayerDescriptor>point_simplepoint.sld
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>Simple Point</Name>
<UserStyle>
<Title>SLD Cook Book: Simple Point With Stroke</Title>
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>SLD Snippet (Full SLD)
<NamedLayer>
<Name>Simple Point</Name>
<UserStyle>
<Title>SLD Cook Book: Simple Point With Stroke</Title>
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>SLD Snippet (Full SLD)
<NamedLayer>
<Name>Simple Line</Name>
<UserStyle>
<Title>SLD Cook Book: Simple Line</Title>
<FeatureTypeStyle>
<Rule>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">3</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>SLD Snippet (Full SLD)
<NamedLayer>
<Name>Simple polygon</Name>
<UserStyle>
<Title>SLD Cook Book: Simple polygon</Title>
<FeatureTypeStyle>
<Rule>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#000080</CssParameter>
</Fill>
</PolygonSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>SLD Snippet (Full SLD)
<NamedLayer>
<Name>Two color gradient</Name>
<UserStyle>
<Title>SLD Cook Book: Two color gradient</Title>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<ColorMap>
<ColorMapEntry color="#008000"
quantity="70" />
<ColorMapEntry color="#663333"
quantity="256" />
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer><Graphic>
<ExternalGraphic>
<OnlineResource> (Required)
<Format>
<Mark>
<WellKnownName> (Required)
<Fill>
<Stroke>
<Opacity>
<Size>
<Rotation><Stroke>
<GraphicFill>
<Graphic> contents same as PointSymbolizer
<GraphicStroke>
<Graphic> contents same as PointSymbolizer
<CssParameter name="...">
name="stroke"
name="stroke-width"
name="stroke-opacity"
name="stroke-linejoin"
name="stroke-linecap"
name="stroke-dasharray"
name="stroke-dashoffset"<Fill>
<GraphicFill>
<Graphic> contents same as PointSymbolizer
<CssParameter name="...">
name="fill"
name="fill-opacity"
<Stroke> same as the LineSymbolizer<Opacity>
<ColorMap type="ramp | values | intervals" extended="true | false">
<ColorMapEntry color="" quantity="" label="" opacity=""/>
<ChannelSelection>
<RedChannel> <GreenChannel> <BlueChannel>
<SourceChannelName>
<GrayChannel>
<SourceChannelName>
<ContrastEnhancement>
<ShadedRelief> (not implemented in ver 2.0)
<OverlapBehavior> (not implemented in ver 2.0)
<ImageOutline> (not implemented in ver 2.0)Filters based upon Attribute Values
<PropertyIsEqualTo>
<PropertyIsNotEqualTo>
<PropertyIsLessThan>
<PropertyIsLessThanOrEqualTo>
<PropertyIsGreaterThan>
<PropertyIsGreaterThanOrEqualTo>
<PropertyIsBetween>
Logical Filters - for combining multiple filters
<And>
<Or>
<Not>
Spatial Filters
<Intersects>
<Equals>
<Disjoint>
<Within>
<Overlaps>
<Crosses>
<DWithin>
<Beyond>
<Distance>
Scale-based selection
<MaxScaleDenominator>
<MinScaleDenominator>
To define an Attribute Filter you need to know both the Attribute Name of the layer(s) that will use the filter and the value(s) of that field that will be used for the filter. How do you determine the attribute name and values?
ogrinfo command from the command line on the class linux server.For example:
ogrinfo -fields=YES -geom=NO kb_gpsrdsdd.shp kb_gpsrdsdd
Where this command requests that the fields and their values be displayed, but that the detailed geometry information (i.e. all of the nodes associated with each feature) be suppressed in the output
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!-- New Mexico Highways -->
<NamedLayer>
<Name>NM Roads</Name>
<UserStyle>
<Name>NM Roads</Name>
<FeatureTypeStyle>
<Rule>
<Title>NM Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>State Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>2</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- US Highways -->
<Rule>
<Title>US Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>US Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#ff0000</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- Interstate Highways -->
<Rule>
<Title>Interstates</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>Interstate</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#fcff00</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>5</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#222222</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>The only change needed to introduce scale-dependencies into styles is to include <MaxScaleDenominator> or <MinScaleDenominator> elements within a rule where they should be applied. These elements should be placed just before the symbolizer element so that GeoServer can properly validate the provided SLD.
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!-- New Mexico Highways -->
<NamedLayer>
<Name>NM Roads</Name>
<UserStyle>
<Name>NM Roads</Name>
<FeatureTypeStyle>
<Rule>
<Title>NM Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>State Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<MaxScaleDenominator>1000000</MaxScaleDenominator>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>2</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- US Highways -->
<Rule>
<Title>US Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>US Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<MaxScaleDenominator>5000000</MaxScaleDenominator>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#ff0000</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- Interstate Highways -->
<Rule>
<Title>Interstates</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>Interstate</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#fcff00</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>5</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#222222</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>Class GeoServer Instance: http://mapper.internetmapping.net:8081/geoserver/web/
SLD Creation Using QGIS: Link to the QGIS Vector Properties Dialog Documentation.
Review of Raster Styling in GeoServer
Raster Styling Demonstration
<Opacity>
<ColorMap type=ramp|values|intervals extended=true|false />
<ColorMapEntry color="" quantity="" label="" opacity=""/>
<ChannelSelection>
<RedChannel> <GreenChannel> <BlueChannel>
<SourceChannelName>
<GrayChannel>
<SourceChannelName>
<ContrastEnhancement>
<ShadedRelief> (not implemented in ver 2.0)
<OverlapBehavior> (not implemented in ver 2.0)
<ImageOutline> (not implemented in ver 2.0)<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>ElevationData</Name>
<UserStyle>
<Name>dem</Name>
<Title>Simple DEM style</Title>
<Abstract>Classic elevation color progression</Abstract>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<Opacity>1.0</Opacity>
<ColorMap>
<ColorMapEntry color="#000000" quantity="-500" label="nodata" opacity="0.0" />
<ColorMapEntry color="#AAFFAA" quantity="0" label="0" />
<ColorMapEntry color="#00FF00" quantity="1000" label="1000"/>
<ColorMapEntry color="#FFFF00" quantity="1200" label="1200" />
<ColorMapEntry color="#FF7F00" quantity="1400" label="1400" />
<ColorMapEntry color="#BF7F3F" quantity="1600" label="1600" />
<ColorMapEntry color="#99CC66" quantity="2000" label="2000" />
<ColorMapEntry color="#336633" quantity="2500" label="2500" />
<ColorMapEntry color="#006600" quantity="3000" label="3000" />
<ColorMapEntry color="#FFFFFF" quantity="3500" label="3500" />
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor><ColorMap> or <ColorMap type="ramp">
<ColorMap type="intervals">
<ColorMap type="values">
<ColorMap type="ramp" extended="false"> = 256 colors in ramp (default)
<ColorMap type="ramp" extended="true"> = 65536 colors in rampOptions for defining opacity appear in two places in the raster symbolizer.
At the level of the entire raster dataset
Within a ColorMapEntry for a specific color definition within a ColorMap
<ColorMap>
<ColorMapEntry color="#000000" quantity="-500" label="nodata" opacity="0.0" />
<ColorMapEntry color="#AAFFAA" quantity="0" label="0" />
<ColorMapEntry color="#00FF00" quantity="1000" label="1000"/>
...
<ColorMapEntry color="#FFFFFF" quantity="3500" label="3500" />
</ColorMap>Many raster datasets contain multiple bands of values which may be viewed individually or assigned to the colors red, green, and blue to generate a color image representing a combination of band values. GeoServer allows for the specification of a single band for display as a GrayChannel or three bands as RedChannel, GreenChannel, and BlueChannel.
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>DOQQBands</Name>
<UserStyle>
<Name>DOQQ321</Name>
<Title>Simple DEM style</Title>
<Abstract>Classic elevation color progression</Abstract>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<ChannelSelection>
<RedChannel>
<SourceChannelName>3</SourceChannelName>
</RedChannel>
<GreenChannel>
<SourceChannelName>2</SourceChannelName>
</GreenChannel>
<BlueChannel>
<SourceChannelName>1</SourceChannelName>
</BlueChannel>
</ChannelSelection>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>Some raster data may need adjustment to increase the contrast (the range between the darkest and lightest values) displayed. GeoServer provides three options for contrast enhancement, each of which have a different effect on the resulting image.
<RasterSymbolizer>
<Opacity>1.0</Opacity>
<ChannelSelection>
<RedChannel>
<SourceChannelName>1</SourceChannelName>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
</RedChannel>
<GreenChannel>
<SourceChannelName>2</SourceChannelName>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
</GreenChannel>
<BlueChannel>
<SourceChannelName>3</SourceChannelName>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
</BlueChannel>
</ChannelSelection>
</RasterSymbolizer>Class GeoServer Instance: http://mapper.internetmapping.net:8081/geoserver/web/
Whew!!! That’s a bunch of work for 16 weeks. Good Job.
A KMZ file may be extracted and its contents examined by many zipfile utilities if you replace the .kmz extension with .zip prior to trying to extract↩